<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="telephone=no" name="format-detection">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>宣和艺网-共享艺术服务平台</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}" />
  <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d554d2fe469092ab25a4245851a644f0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

</head>

<body>
  <!--手机搜索begin-->
  <div id="nav-search">

  </div>
  <div class="drawer-section search_div">
    <div class="search_con">
      <form action="" style="width: 100%;height: 100%;">
        <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
          onBlur="if(value==''){value='搜索'}" />
        <input type="submit" value="" class="bnt1" />
      </form>
    </div>
  </div>
  <!--top-->
  <div id="top">
    <div th:replace="~{mobile/artist/component/header :: artist_menu}"></div>
    <div class="muen1" style="right: 56px;"> <span class="muenX"></span>
<!--      <span class="muenY">-->
<!--        <img class="img1" th:src="@{/images/mobile/search_image.png}" />-->
<!--      </span> -->
      <span class="muenZ"></span> </div>
    <div class="muen"> <span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span> </div>
  </div>
  <!--/top-->

  <!--main-->
  <div class="main">
    <div class="theme_layoutbox_1208765579" style="position: relative;width: 100%;height: auto;transform-origin: top left;overflow-x: hidden;">
      <div style="overflow-x: hidden;">
        <img th:src="${artistTemp.bannerUrl}" style="width: 100%;height: auto;overflow: hidden">
      </div>
    </div>

    <style>
      #page-content-2 img{
        width: 100% !important;
        height: auto;
      }
    </style>

    <div class="about_bg3">
      <div class="aboutL">
        <!--<span class="BtnL"></span>-->
        <div class="aboutH">
          <h3>ARTIST CENTER</h3>
          <h2 th:each="artistSectionTemp, index : ${artistSectionTemps}">
            <span th:if="${artistSectionTemp.id.toString() == sid.toString()}">[[ ${artistSectionTemp.name} ]]</span>
          </h2>
        </div>
      </div>

      <div style="clear: both;height: 0.5rem;">

      </div>
      <div class="encyclopedia-type">

      </div>
      <div class="product_ul anim anim-1 anim-show">

<!--        id="page-content  transform-origin: top left;"-->
        <div style="border: 1px solid #ccc;display: flex;background: #fff;box-shadow: 2px 2px 5px #ccc;width: 98%;margin-bottom: 17px;">
          <div style="width: 40%;float: left;padding-left: 10px;padding-right: 10px;margin-bottom:15px;margin-top:15px;border-right: 1px solid #eee">
            <img th:src="${artist.url}"
                 style="width: 100%; overflow: hidden;    margin-right: 20px; margin-top: 15px;position: relative;bottom: 12px;">
          </div>
          <div style="width: 60%;float: left;padding-top: 2px;padding-left: 5px;margin-top: 15px;margin-bottom: 15px;">
            <div style="text-align: left;font-size: 16px;margin-bottom: 5px;">
              <b><span style="letter-spacing: 2px;font-size:20px;color: #b68036">[[ ${ artist.name } ]]</span><span> [[ ${artist.pinyin} ]] </span></b>
            </div>
            <div>
              <div th:each="honor:${honors}" style="float: left;font-size: 12px;text-align: left;">
                <img th:src="@{/images/honor.png}" style="width: 12px;
										position: relative;
										margin-right: 2px;
										top: 4px;">
                [[ ${honor}  ]]
              </div>
            </div>
            <div style="clear: both;"></div>
            <div style="font-size: 12px;line-height: 150%;">
              <div style="text-align: left;margin-top: 10px;">艺术擅长：
                <span th:each="artType:${artTypes}" style="margin-right: 0px;margin-bottom: 10px;padding: 1px 2px;font-weight: bold;">
                  [[ ${artType}  ]]
                </span>
              </div>

            </div>
          </div>
        </div>
        <div style="clear: both;"></div>
        <div style="border: 1px dashed #ccc;width: 95%;margin: 0 auto;margin-top: 25px;margin-bottom: 15px;">

        </div>
        <div id="page-content-2" style="text-align: left;padding-left: 1%;" th:utext="${pageDetails[0]}"> </div>

        <!-- 艺术家二维码 -->
        <div style="border: 1px dashed #ccc;margin-top: 50px;margin-bottom: 10px;">

        </div>
        <div>
          <div th:if="${artist.erweima != null}">
            <img th:src="${artist.erweima}"
                 style="width: 100%;  float: left; margin-right: 20px; margin-bottom: 20px;margin-top: 15px;">

          </div>
          <div style="text-align: center;margin-top: 5px;" >关注实时更新</div>
        </div>

        <div th:if="${artist.erweima2 != null||artist.email != null||artist.phone != null}" style="border: 1px dashed #ccc;margin-top: 50px;margin-bottom: 10px;">

        </div>
        <div th:if="${artist.erweima2 != null||artist.email != null||artist.phone != null}">
          <div style="margin-top: 15px;font-size: 16px;color: #b68036" >联系方式</div>
          <div th:if="${artist.phone != null }" style="margin-top: 15px;font-size: 14px;" >电话：[[ ${artist.phone} ]]</div>
          <div th:if="${artist.email != null}" style="margin-top: 15px;font-size: 14px;" >邮箱：[[ ${artist.email} ]]</div>
          <div th:if="${artist.erweima2 != null}">
            <img th:src="${artist.erweima2}"
                 style="max-width: 250px;  float: left; margin-right: 20px; margin-bottom: 20px;margin-top: 15px;">
            <div style="text-align: center;">联系二维码</div>

          </div>
        </div>
        <style>
          .left-content img {
            max-width: 250px;
          }
        </style>
      </div>

    </div>

  </div>

  <!--/main-->

  <!--footer-->
  <div th:replace="~{mobile/component/footer :: footer}"></div>
  <!--/footer-->

  <!--wap-->
  <div th:replace="~{mobile/component/footer :: footer_menu}"></div>
  <!--/wap-->

  <div class="wapBg"></div>
</body>
<script type="text/javascript">
  $('.slider1').bxSlider({
    'auto': true,
    'controls': true,
    'touchEnabled': true,
    'pager': true,
    'speed': 1000,
    'pause': 4000,

  })

  $('.sliderHomeSpT').bxSlider({
    'auto': false,
    'controls': true,
    'touchEnabled': true,
    'pager': true,

  })

  var lineW = $(".lineW span").width();
  $('.sliderHomeSpB').bxSlider({
    'auto': false,
    infiniteLoop: true,
    'controls': true,
    'touchEnabled': true,
    'pager': true,
    'slideWidth': '204',
    'minSlides': 2,
    'maxSlides': 5,
    'moveSlides': 5,
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
      var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
      var lineWW = $(".lineW").width();


      if (newIndex == 0) {
        $(".lineW span").css({
          "width": lineW + 'px'
        })
      } else {
        $(".lineW span").css({
          "width": (lineWW / num) * (newIndex + 1) + 'px'
        })
      }

    },


  })

  $('.sliderHomeDzzc').bxSlider({
    'auto': true,
    'controls': true,
    'touchEnabled': true,
    'pager': false,
    'slideWidth': '280',
    'minSlides': 2,
    'maxSlides': 4,
    'moveSlides': 1,
    'speed': 600,
    //	    'slideMargin': 20
  })





</script>

</html>
